<template>
  <div class="aiRowTwoR">
    <div class="smartyAiContainer">
      <div class="smartyAiTitle">
        <p style="font-weight:bolder;">AI智投</p>
        <p style="font-weight:100">简单描述您的需求，免费获取专属的媒体投放解决方案</p>
      </div>
    </div>
    <div class="smartyAiInput">
      <img src="../../../assets/img/3-一站式AI/8.png" alt="" style="margin-top:38px;margin-left:-22px">
      <p class="smartyAiP">已有
        <span>{{num}}</span>个广告主需求</p>
      <img src="../../../assets/img/3-一站式AI/9.png" alt="" style="margin-left:30px;margin-top:65px;">
      <div style="margin-top: 80px;position: relative;">
        <label style="font-size:16px;color:rgb(34,34,34);">预算金额</label>
        <input type="text" @focus="inputFocus"  @blur="inputBlur" :class="{phClass:inputStatus}" placeholder="请输入"  style="width: 111px;height: 28px;border:1px solid #222;padding-left: 20px;box-sizing: border-box;font-size: 14px;" v-model="input1">
        <span style="position: absolute;right:25px;top:4px;font-size: 14px;color:rgb(34,34,34);">元</span>
      </div>
      <div style="margin-top:30px;">
        <label style="font-size:16px;">营销目标</label>
        <select style="width:111px;height: 28px;padding-left: 8%;outline: none;font-size: 14px;color:#737373; border:1px solid #222;" v-model="selected">
          <option value="" disabled>请选择</option>
          <option value="品牌传销">品牌传销</option>
          <option value="产品促销">产品促销</option>
          <option value="下载APP">下载APP</option>
          <option value="大号增粉">大号增粉</option>
          <option value="获取表单">获取表单</option>
        </select>
      </div>
      <button class="height" @click="routetoai">免费获取</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 1284,
      scrollRoute: "",
      input1: "",
      selected: "",
      inputStatus: false,
    };
  },
  methods: {
    time() {
      this.scrollRoute =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // if (this.scrollRoute >= 2012) {
        var timer = setInterval(() => {
          if (this.num < 9000) {
            this.num = this.num + Math.floor(99*Math.random());
          } else {
            clearInterval(timer);
          }
        }, 1500);
      // }
    },
    routetoai() {
      if (!this.input1) {
        this.$message.error("请选择投放的金额");
      } else if (!this.selected) {
        this.$message.error("请选择投放的目标");
      } else {
        this.$router.push({
          path: "/createAIPlan",
          query: { num: this.input1, target: this.selected }
        });
      }
    },
    inputFocus(){
      this.inputStatus = true;
    },
    inputBlur(){
      this.inputStatus = false;
    },
  },
  mounted() {
    // window.addEventListener("scroll", this.time);
  },
  created(){
    this.time();
  }
};
</script>
<style scoped>
.aiRowTwoR {
  width: 210px;
  float: left;
  height: 640px;
  padding-left:10px;
  padding-right:10px;
  -moz-box-shadow:0px 0px 16px #D4D4D4; -webkit-box-shadow:0px 0px 16px #D4D4D4; box-shadow:0px 0px 16px #D4D4D4;
  background-image: url("../../../assets/img/3-一站式AI/10.png");
  background-repeat: no-repeat;
  background-position: top right;
}
.smartyAiContainer {
  width: 100%;
  height: 140px;
  /* background-image: url("../../../assets/img/3-一站式AI/7.png"); */
  /* background-image: url("../../../assets/img/3-一站式AI/10.png");
  background-repeat: no-repeat;
  background-position: top right; */
}
/* .smartyAiTitle {
  width: 180px;
  margin: 0 auto;
  height: 100px;
  overflow: hidden;
} */
.smartyAiTitle > p {
  margin-top: 20px;
}
.smartyAiTitle > p:nth-child(1) {
  color: rgb(34, 34, 34);
  font-size: 18px;
}
.smartyAiTitle > p:nth-child(2) {
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.smartyAiInput {
  width: 100%;
  height: 500px;
  position: relative;
}
.smartyAiP {
  position: absolute;
  font-size: 14px;
  top: 40px;
  left: 0px;
  color: #fff;
}
.smartyAiP > span {
  font-size: 18px;
  margin-left:-3px;
  margin-right:1px;
}
.inputOne > label {
  font-size: 16px;
  color: #737373;
}
.height {
  background-color: #ee4041;
  width: 111%;
  height: 30px;
  color: #fff;
  margin-top: 25px;
  margin-left:-10px;
}

.phClass::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: transparent
}
.phClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent
}
.phClass::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent
}
.phClass:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: transparent
}
</style>